<script lang="ts" setup>
// import { useRoute, useRouter } from "vue-router"
import { reactive, ref } from "vue"
const mf = ref()
var rootPrint = function (elId: any) {
    // 设置要打印内容的 id: elId
    const WindowPrt: any = window.open(
      "",
      "打印",
      "width=" +
        (screen.availWidth - 10) +
        ",height=" +
        (screen.availHeight - 50) +
        ",left=0,top=0,location=0,menubar=0,toolbar=0,scrollbars=0,status=0"
    ) // 裸全屏
    WindowPrt.document.head.innerHTML = window.document.head.innerHTML // 加入当前所有头 - 以防样式丢失
    WindowPrt.document.body.innerHTML = elId.innerHTML // 载入指定body
    WindowPrt.print() // 调用打印
    // WindowPrt.close() // 自动等待print结束后执行
  }
function print() {
  // 打印
  rootPrint(mf.value)

  console.log(mf.value)
}
const info = ref("取消订单")
const num = ref(1)
const s3 = ["产品工号", "产品名称", "物料名称", "机号", "图号", "件号", "数量", "备注"]
const tableData2: any = []
for (let index = 0; index < 6; index++) {
  tableData2.push({
    name0: "10020017" + (index + 4),
    name1: "印度",
    name2: "前大梁",
    name3: "5#",
    name4: "GYDE-2-3",
    name5: "1/2",
    name6: "23",
    name7: ""
  })
}

function sw() {
  switch (num.value) {
    case 0:
      info.value = "取消订单"
      break
    case 1:
      info.value = "退库"
      break
    case 2:
      info.value = "取消退库"
      break
    default:
      break
  }
  num.value++
  if (num.value > 2) {
    num.value = 0
  }
}
const radio1 = ref("是")
const tableData = [
  {
    date: "生产部",
    name: "张三",
    address: "紧急单，请尽快"
  },
  {
    date: "物资部",
    name: "李四",
    address: "好的，收到"
  }
]

const ruleForm = reactive({
  name: "",
  sum: 20
})
const rules = reactive({
  req: [{ required: true, message: "请输入", trigger: "blur" }]
})
</script>

<template>
  <div class="app-container" ref="mf">
    <el-card shadow="never" class="search-wrapper">
      <div style="max-width: 920px" class="m-auto">
        <!-- <div class="py-3 text-right">
        </div> -->
        <div class="py-3 flex">
          <div class="text-2xl flex-1">
            领料单
            <el-button type="primary" class="ml-3" @click="print">打印</el-button>
          </div>
          <div class="pr-5">
            <img src="/ji1.png" class="w-14" alt="" />
            <img src="/ji1.png" class="w-14" alt="" />
            <img src="/ji1.png" class="w-14" alt="" />
            <span class="urgent-stamp">加急订单</span>
          </div>
          <div class="">
            <img class="w-20" src="/code.png" alt="" />
          </div>
        </div>
        <el-steps :active="2" finish-status="success" class="pb-6">
          <el-step title="下单" description="2024-03-25 08:05:58" />
          <el-step title="审批完成" description="2024-03-25 08:05:58" />
          <el-step title="待打包" />
          <el-step title="打包中" />
          <el-step title="打包完成" />
        </el-steps>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        inline
        label-width="auto"
        status-icon
        style="max-width: 920px"
        class="m-auto"
      >
        <el-divider />
        <el-form-item label="申请部门" prop="name">
          <div style="width: 178px">生产部</div>
        </el-form-item>
        <el-form-item label="车间" prop="region">
          <div style="width: 178px">1车间</div>
        </el-form-item>
        <el-form-item label="班组" prop="region">
          <div style="width: 178px">2班组</div>
        </el-form-item>
        <br />
        <el-form-item label="申请人" prop="region">
          <div style="width: 178px">张三</div>
        </el-form-item>
        <el-form-item label="电话" prop="region">
          <div style="width: 178px">13688889999</div>
        </el-form-item>
        <el-form-item label="收货地点" prop="req">
          <div style="width: 178px">小长兴</div>
        </el-form-item>
        <el-form-item label="加急原因" prop="req">
          <div style="width: 178px; color: red">物流刚到货</div>
        </el-form-item>
        <el-form-item label="审批人" prop="req">
          <div class="flex" style="width: 178px">
            李四
            <img class="w-20" src="/lisi.png" alt="" />
          </div>
        </el-form-item>
        <el-divider />
        <el-table :data="tableData2" class="mb-5">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column type="index" label="序" width="50" />
          <el-table-column
            v-for="(item, index) in s3"
            :key="index"
            :prop="'name' + index"
            :label="item"
            align="center"
          />
        </el-table>
        <div class="mb-5 flex">
          <div class="flex-1"></div>
          <el-pagination background layout="sizes, prev, pager, next" :total="30" />
        </div>
        <!-- <el-form-item label="产品工号" prop="req">
          <div style="width: 178px">100200176 </div>
        </el-form-item>
        <el-form-item label="产品名称" prop="req">
          <div style="width: 178px">印度</div>
        </el-form-item>
        <el-form-item label="机号" prop="req">
          <div style="width: 178px">1#</div>
        </el-form-item>
        <br />
        <el-form-item label="物料名称" prop="req">
          <div style="width: 178px">前大梁</div>
        </el-form-item>
        <el-form-item label="图号" prop="req">
          <div style="width: 178px">GYDE-2-3</div>
        </el-form-item>
        <el-form-item label="件号" prop="req">
          <div style="width: 178px">1/2</div>
        </el-form-item>
        <br />
        <el-form-item label="数量" prop="req">
          <div style="width: 178px">
            56
          </div>
        </el-form-item>
        <el-form-item label="备注" prop="reqe">
          这是一段备注
        </el-form-item> -->
        <el-divider />
        <!-- 选择自行打包,打包人默认是下单人 <br> -->
        <el-form-item label="自行打包" prop="req">
          <div style="width: 178px">
            <el-radio-group v-model="radio1">
              <el-radio-button label="是" value="1" />
              <el-radio-button label="否" value="2" />
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="打包人" prop="req">
          <div style="width: 178px">王五</div>
          <!-- <el-input model-value="王五" placeholder="请选择" /> -->
        </el-form-item>
        <el-form-item label="复核人" prop="req">
          <!-- <div style="width: 178px">
            王五
          </div> -->
          <el-input v-model="ruleForm.name" placeholder="请选择" />
        </el-form-item>
        <br />
        <el-form-item label="打包照片" prop="req">
          <el-upload
            class="avatar-uploader"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
            style="width: 178px"
          >
            <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="&nbsp;">
          <el-button type="primary">开始打包</el-button>
          <el-button type="primary">打包完成</el-button>
          <el-button type="primary">复核完成</el-button>
        </el-form-item>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="部门" width="180" />
          <el-table-column prop="name" label="姓名" width="180" />
          <el-table-column prop="address" label="备注内容" />
        </el-table>
        <br />

        <el-form-item label="备注">
          <div style="width: 178px">
            <el-input v-model="ruleForm.name" placeholder="请输入" />
          </div>
        </el-form-item>
        <el-form-item label="&nbsp;">
          <div style="width: 178px">
            <el-button type="primary">添加备注</el-button>
          </div>
        </el-form-item>
      </el-form>
      <div class="text-right m-auto" style="max-width: 920px">
        <el-button @click="sw">{{ info }}</el-button>
        <!-- <el-button>取消退库</el-button> -->
        <!-- <el-button>取消订单</el-button>
        <el-button>退库</el-button> -->
      </div>
    </el-card>
  </div>
</template>
<style>
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-divider--horizontal {
  margin: 0 0 18px 0;
}
.urgent-stamp {
  position: relative;
  display: inline-block;
  padding: 10px;
  background-color: #fff;
  border: 2px dashed #ff0000;
  color: #ff0000;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  transform: rotate(-15deg);
}

.urgent-stamp::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background-color: #ff0000;
  opacity: 0.2;
  border-radius: 50%;
  z-index: -1;
}

.urgent-stamp::after {
  /* content: "急件"; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(15deg);
  font-size: 24px;
  font-weight: bold;
  color: #ff0000;
}
</style>
